<template>
  <div class="goods-wrapper">
    <div class="content">
      <div class="top">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="上架商品" name="first" />
          <el-tab-pane label="下架商品" name="second" />
        </el-tabs>
      </div>
      <div class="middle">
        <div class="left">
          <Input ref="searchInpur" placeholder="请输入商品/货号" class="input-cls" @search="handleSearch" />
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="分类筛选：">
              <el-select v-model="value" clearable placeholder="全部" @change="handleChange">
                <el-option
                  v-for="item of classicList"
                  :key="item.id"
                  :label="item.kind_name"
                  :value="item.id"
                />
              </el-select>
              <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <el-button @click="addGoods">添加</el-button>
        </div>
      </div>
      <div class="bottom">
        <table-list :table-data="tableData" @success="deleteSuccess" @edit="handleEdit" @switchChange="handleSwitchChange" />
      </div>
    </div>
    <Pagination class="pagination" :page-size="pageSize" :total="total" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import TableList from './tableList'
import Pagination from '@/common/pagination'
import { getGoodsList, getClassificationList } from '@/api/goods'
const ERR_OK = 200
export default {
  components: {
    Input,
    TableList,
    Pagination
  },
  data() {
    return {
      activeName: 'first',
      formInline: {
        region: ''
      },
      tableData: [],
      putaway: 1,
      classicList: [],
      value: '',
      query: '',
      page: 1,
      total: 0,
      pageSize: 9,
      currentPage: 0
    }
  },
  mounted() {
    this._getClassificationList()
      .then(res => {
        this._getGoodsList({
          putaway: this.putaway,
          page: this.page
        })
      })
      .catch(err => {
        console.log(err)
      })
  },
  methods: {
    deleteSuccess() {
      this.page = 1
      this.currentPage = 1
      this._getClassificationList()
        .then(res => {
          this._getGoodsList({
            putaway: this.putaway,
            page: this.page
          })
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleChange(id) {
      this.clearInput()
      this.page = 1
      this.currentPage = 1
      this._getGoodsList({ putaway: this.putaway, kind: id, condition: this.query, page: this.page })
    },
    handleClick(tab, event) {
      switch (tab.name) {
        case 'first':
          this.putaway = 1
          break
        case 'second':
          this.putaway = 0

          break
      }
      this.page = 1
      this.currentPage = 1
      this.value = ''
      this.clearInput()
      this._getGoodsList({
        putaway: this.putaway,
        page: this.page
      })
    },
    handleSearch(query) {
      this.query = query
      this.page = 1
      this.currentPage = 1
      this._getGoodsList({ putaway: this.putaway, condition: this.query, page: this.page })
    },
    addGoods() {
      this.$emit('addGoods')
      this.$store.dispatch('goodsId/setEditType', false)
    },
    handleEdit() {
      this.$emit('editGoods')
    },
    handleSwitchChange(data) {
      if (data.row.is_putaway) {
        this.putaway = 1
      } else {
        this.putaway = 0
      }
    },
    handleNextPage(page) {
      this.page = page
      this._getGoodsList({ putaway: this.putaway, condition: this.query, page: this.page })
    },
    clearInput() {
      this.$refs.searchInpur.clear()
    },
    _replaceKey(arr, oldKey, newKey) {
      arr.forEach((item, index) => {
        while (item[oldKey]) {
          item[newKey] = item[oldKey]
          delete item[oldKey]
        }
      })
      return arr
    },
    _formatClassicList(arr) {
      arr.forEach((item, index) => {
        if (item.id && item.kind_name) {
          item.value = item.id
          item.label = item.kind_name
        }
        if (item.children) {
          this._formatClassicList(item.children)
        }
      })
      return arr
    },
    _getGoodsList({ putaway, condition, kind, is_vip, page }) {
      getGoodsList({ putaway, condition, kind, is_vip, page })
        .then(res => {
          if (res.code === ERR_OK) {
            this.total = res.data.total
            this.currentPage = res.data.current_page
            res.data.data.forEach((item, index) => {
              if (parseInt(item.is_putaway)) {
                item.is_putaway = true
              } else {
                item.is_putaway = false
              }
            })
            this.tableData = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getClassificationList() {
      return new Promise((resolve, reject) => {
        getClassificationList()
          .then(res => {
            if (res.code === ERR_OK) {
              // this.classicList = this._formatClassicList(this._replaceKey(res.data, 'lower', 'children'))
              this.classicList = res.data
              console.log(this.classicList)
            }
            resolve()
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.goods-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .content {
    min-height: 105vh;
    overflow: hidden;
    // padding-bottom: 50px;
    .top {
      padding: 10px 10px;
      box-sizing: border-box;
    }
    .middle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .input-cls {
          margin-right: 23px;
        }
        .el-form-item {
          margin-right: 0 !important;
          margin-bottom: 0 !important;
        }
      }
      .right {
        .el-button {
          color: #fff;
          height: 40px;
          width: 87px;
        }
      }
    }
    .bottom {
      margin-top: 17px;
    }
  }
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
</style>
